<template>
  <view class="tabs-root" :style="rootStyle">
    <view
      v-for="(item, index) in lableList"
      :key="index"
      class="tab-item"
      :style="[tabShapeStyle, tabStyle, index === activeIndex ? activeStyle : inactiveStyle]"
      @tap="handleChange(index)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  lableList: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Number,
    default: 0
  },
  rootStyle: {
    type: [String, Object],
    default: 'background:#fff;'
  },
  // 基础样式（字体大小 / 内边距）
  tabStyle: {
    type: [String, Object],
    default: 'font-size:28rpx;padding:14rpx 30rpx;'
  },
  activeStyle: {
    type: [String, Object],
    default: 'background:#e54d42;color:#fff;'
  },
  inactiveStyle: {
    type: [String, Object],
    default: 'background:#fff;color:#333;'
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const activeIndex = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
  activeIndex.value = val
})

// 胶囊形：两端圆角
const tabShapeStyle = {
  borderRadius: '30rpx',
  padding: '0 10rpx',
  lineHeight: '30rpx',
  height:'30rpx'
}

const handleChange = (index) => {
  if (activeIndex.value !== index) {
    activeIndex.value = index
    emit('update:modelValue', index)
    emit('change', index)
  }
}
</script>

<style scoped>
.tabs-root {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tab-item {
  transition: all 0.3s;
 
}
</style>
